<div auto-scroll class="popover" click-anywhere="$hide()" ignore-class="group-selection">
  <div class="arrow"></div>
  <div class="popover-header">
    <span class="title">{{title && title || 'GENERAL.TITLE.SELECT-GROUP' | translate}}</span>

    <div class="actions">
      <a ng-click="$hide()">
        {{'GENERAL.ACTION.CLOSE' | translate}}</a>
    </div>
  </div>
  <div class="popover-wrapper">
    <div class="form-group" ng-if="popupModel.formFields">
      <div class="col-xs-4">
        <label>{{'GENERAL.MESSAGE.GROUP-SOURCE-TYPE' | translate}}</label>
      </div>
      <div class="col-xs-8">
        <div class="btn-group btn-group-justified">
          <div class="btn-group">
            <button class="btn btn-default"
                    ng-class="{'active' : (!popupModel.groupSourceType || popupModel.groupSourceType == 'search')}"
                    ng-click="setSearchType()"
                    ng-model="popupModel.groupSourceType"
                    type="button">
              {{'GENERAL.MESSAGE.GROUP-SOURCE-SEARCH-OPTION' | translate}}
            </button>
          </div>
          <div class="btn-group">
            <button class="btn btn-default" ng-class="{'active' : popupModel.groupSourceType == 'field'}"
                    ng-click="setFormFieldType()"
                    ng-model="popupModel.groupSourceType" type="button">
              {{'GENERAL.MESSAGE.GROUP-SOURCE-FIELD-OPTION' | translate}}
            </button>
          </div>
        </div>
      </div>
    </div>

    <div class="col-xs-12" ng-if="popupModel.formFields" style="margin-bottom:10px"/>

    <div ng-show="(!popupModel.groupSourceType || popupModel.groupSourceType == 'search')">
      <div class="subtitle" translate="GENERAL.TITLE.FILTER">
      </div>
      <div class="form-group">
        <input auto-focus class="form-control" custom-keys delay="200" delayed-model="popupModel.filter"
               down-pressed="nextGroup()"
               enter-pressed="confirmGroup()" id="people-select-input" placeholder="Search group"
               type="text" up-pressed="previousGroup()"/>
        <div class="inline-help" translate="GENERAL.MESSAGE.SELECT-GROUP-HELP"></div>
      </div>
      <div class="subtitle">
        <span translate="GENERAL.TITLE.MATCHING-GROUPS"></span>
      </div>
      <div class="people-select">
        <ul class="simple-list">
          <li ng-class="{'active': group.id === popupModel.selectedGroup.id}" ng-click="confirmGroup(group);"
              ng-repeat="group in popupModel.groupResults">
            {{group.name}}
          </li>
        </ul>
        <div class="nothing-to-see" ng-show="popupModel.groupResults.length == 0"
             translate="GENERAL.MESSAGE.GROUP-NO-MATCHING-RESULTS"></div>
      </div>
    </div>

    <div class="form-group clearfix" ng-show="popupModel.groupSourceType == 'field'">
      <div class="col-xs-4">
        <label>{{'PROCESS-BUILDER.PUBLISH-STEP.SOURCE.FORM-FIELD' | translate}}:</label>
      </div>
      <div class="col-xs-8">
        <div expand-relative="true" field-type-filter="popupModel.groupFieldFilter" fields="popupModel.formFields"
             id="userFormField"
             ignore-selection="true"
             include-type="false" select-title="'FORM-BUILDER.MESSAGE.READONLY-TEXT-INSERT-FIELD'"
             selected-field="popupModel.groupField" variables-select></div>
      </div>
    </div>
  </div>
</div>
